<html>
<head>
	<title>TEST OF WATAJAX FILTER</title>
	<script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="../jquery.watajax.js"></script>
	<link href="../css/default/watajax.css" rel="stylesheet" type="text/css" />
	<link href="example.css" rel="stylesheet" type="text/css" />
	<style>
		#test_divs_table_head {
			height: 80px;
		}
		#test_divs_table_pager {
			clear: both;
		}
		#test_divs_table_filter {
			clear: both;
		}
		#test_divs_table_body>div {
			width: 300px;
			float: left;
			padding: 10px;
			border: 1px dashed #999;
			margin: 10px;
		}
		#test_divs_table_head>div>div {
			width: 150px;
			float: left;
			padding: 10px;
			font-weight: bold;
		}
		#test_divs_table_body>div>div {
			border-bottom: 1px solid #f2f2f2;
			padding: 2px;
		}
		#firstname_data {
			font-weight: bold;
			float: left;
		}
		#lastname_data {
			font-weight: bold;
		}
		#gender_data {
			color: #cc00cc;
		}
	</style>
</head>
<body>
	<?php include("menu.inc.php"); ?>
	<div id="test_divs"></div>

	<script>
		var table = null;
		$("#test_divs").watajax({ per_page: 10, table_id: 'emplyees', tools_position: "below", ajax_connector: "ajax_example3.php",
			row_tag: "div",
			column_tag: "div",
			header_column_tag: "div",
			table_tag: "div",
			thead_tag: "div",
			tbody_tag: "div",
			filter_tag: "div",
			filter_column_tag: "div" });
		table = $("#test_divs").data('watajax');
	</script>
</body>
</html>